<template>
  <div>
    <!-- <button style="height:30px;width:80px">新增</button> -->
    <el-tree
      accordion
      ref="treeRefe"
      :data="deptListData"
      @node-click="setDeptId"
      :highlight-current="true"
      :default-expanded-keys="defaultShowNodes"
      :current-node-key="currentNodekey"
      @node-expand="handleNodeExpand"
      @node-collapse="handleNodeCollapse"
      node-key="id"
      :props="defaultChildren"
    >
      <span
        class="custom-tree-node"
        slot-scope="{ node, data }"
      >
        <span class="mdleft">
          <!--        <span style="margin-right: 9px">
          <Icon type="md-folder" color="#BABCC4" size="16"
          /></span>-->
          <opendata
            type="departmentName"
            :openid="data.deptName"
          > </opendata>
          <span
            class="edit"
            style="display: none"
          >
            <el-button
              type="text"
              icon="el-icon-edit"
              @click.stop="edit(node, data)"
            ></el-button>
          </span>
        </span>
        <!-- <span class="md-more">
        <Icon type="md-more" size="20" />
        <div class="member-handle">
          <div style="margin-top: 5px">
            <span @click.stop="handleTreeChange(data, 'add')">添加</span>
          </div>
          <div>
            <span
              v-if="data.parentId != 0"
              @click.stop="handleTreeChange(data, 'edit')"
              >重命名</span
            >
          </div>
          <div v-if="data.parentId != 0" style="margin-bottom: 9px">
            <span @click.stop="handleTreeChange(data, 'delete')">删除</span>
          </div>
        </div>
      </span> -->
      </span>
    </el-tree>

    <el-dialog
      title="编辑区域名"
      :visible.sync="uptdeptNameDialog"
      :close-on-click-modal='false'
    >
      <el-form
        :model="uptdeptNameForm"
        :rules="rules"
        ref='uptDeptNameForm'
      >
        <el-form-item
          label="区域名称"
          :label-width="formLabelWidth"
          prop="name"
        >
          <el-input
            v-model="uptdeptNameForm.name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="uptdeptNameDialog = false">取 消</el-button>
        <el-button
          type="primary"
          @click="uptdept('uptDeptNameForm')"
        >确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { organizationStructureList, getRouter } from '@/api/data.js'
export default {
  props: {
    requestName: {
      type: String,
      default: "departmentListRole", // 默认根据角色获取
    },
  },
  data () {
    return {
      formLabelWidth: "120px",
      uptdeptNameForm: {
        name: "",
      },
      defaultChildren: {
        children: 'childrenList'
      },
      uptdeptNameDialog: false,
      deptList: [], // 当前所选部门id
      defaultShowNodes: [], //默认展开的节点id
      currentNodekey: "",
      deptListData: [],
      rules: {
        name: [
          { required: true, message: '区域名不能为空', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
          {
            validator: function (rule, value, callback) {
              // 校验中文的正则：/^[\u4e00-\u9fa5]{0,}$/
              if (/^[\u4e00-\u9fa5]{0,}$/.test(value) == false) {
                callback(new Error('只能输入中文'))
              } else {
                // 校验通过
                callback();
              }
            }, trigger: 'blur'
          }
        ],
      }
    };
  },
  created () {
    this.departmentList();
    // 获取组织结构列表
    this.getOrganizationStructureList()
  },
  methods: { 
    // 获取组织结构列表
    async getOrganizationStructureList() {
      const res = await organizationStructureList({})
      console.log('组织结构',res);
      this.deptListData = res
    },
    uptdept (uptDeptNameForm) {
      this.$refs[uptDeptNameForm].validate(valid => {
        if (valid) {

        } else {
          return false
        }
      })
    },
    // 编辑区域名
    edit (node, data) {
      console.log(node, data);
      console.log(data.label);
      this.uptdeptNameForm.name = data.deptName;
      this.uptdeptNameDialog = true;
    },
    setDeptId (val) {
      console.log('芜湖',val);
      this.deptList = val;
      console.log('当前选中部门', this.deptList);
      this.$emit("search", this.deptList);
    },
    handleNodeExpand (data) {
      console.log('data', data);
      // 保存当前展开的节点
      let flag = false;
      this.defaultShowNodes.some((item) => {
        if (item === data.id) {
          // 判断当前节点是否存在， 存在不做处理
          flag = true;
          return true;
        }
      });
      if (!flag) {
        // 不存在则存到数组里
        this.defaultShowNodes.push(data.id);
      }
    },
    // 树节点关闭
    handleNodeCollapse (data) {
      this.defaultShowNodes.some((item, i) => {
        if (item === data.id) {
          // 删除关闭节点
          this.defaultShowNodes.length = i;
        }
      });
    },
    // 获取部门列表
    departmentList () {
      this.APIS[this.requestName]().then((res) => {
        if (res.code == 20000) {
          this.deptList = res.data[0];
          this.defaultShowNodes = [res.data[0].id];
          this.currentNodekey = res.data[0].id;
          this.$nextTick(() => {
            this.$refs.treeRefe.setCurrentKey(this.currentNodekey); //一定要加这个选中了否则样式没有出来
          });
          this.deptListData = res.data;

          this.$emit("deptListData", this.deptListData);

          this.$emit("search", this.deptList);
        } else {
          this.$Message.error(res.message);
        }
      });
    },
  },
};
</script>

<style scoped lang="less">
.el-tree-node__content:hover {
  .textd {
    margin-right: 30px;
  }
  .edit {
    display: inline-block !important;
  }
}
.md-more {
  display: none;
  position: absolute;
  right: 10px;
  margin-top: -28px;

  .member-handle {
    text-align: left;
    display: none;
    position: absolute;
    left: -13px;
    top: 15px;
    background: #ffffff;
    border: 0px solid rgba(216, 216, 216, 0.3803921568627451);
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.16);
    opacity: 1;
    z-index: 999;

    div {
      width: 68px;
      padding-top: 3px;
      padding-bottom: 3px;
      color: #969696;
    }

    span {
      font-size: 14px;
      margin-left: 15px;
    }

    div:hover {
      background: #d0e4ff;
    }
  }
}

.md-more:hover {
  .member-handle {
    display: block !important;
  }
}

.el-tree,
/deep/ .el-tree-node__expand-icon {
  color: #333;
}

/deep/ .el-tree-node__expand-icon.is-leaf {
  color: transparent;
}

/deep/ .el-tree-node:focus > .el-tree-node__content {
  background-color: #d0e4ff !important;

  .md-more {
    display: block;
  }
}

::v-deep .el-tree-node__content:hover {
  background-color: #eee;

  .md-more {
    display: block;
  }
}

.el-tree--highlight-current {
  /deep/ .el-tree-node.is-current > .el-tree-node__content {
    background-color: #d0e4ff !important;
  }
}
</style>
